<template>
    <div class="queryproduct">
        <product-filter :status="status" @search="search">
        </product-filter>
        <!--搜索之后把搜到的数据传递-->
        <Empty v-if="queryPros.length==0">没有搜到任何数据</Empty>
        <div class="productlist" v-if="queryPros.length!==0">
            <header style="margin: 24px 0">
                已选中
                <span class="choosenum">{{num}}</span>项
                <!--num 统计true的值-->
                <el-dropdown type="primary" split-button @command="handleCommand">
                    <span class="el-dropdown-link">
                    批量操作
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>批量撤回</el-dropdown-item>
                    </el-dropdown-menu>

                </el-dropdown>
                <export-file :api-info="downloadGoodsApi" style="margin-left: 20px;">导出全部商品</export-file>
            </header>

            <el-table ref="multipleTable" :data="queryPros" border tooltip-effect="dark"
                      @selection-change="handleSelectionChange" style="width: 100%;">
                <el-table-column type="selection" width="58">
                </el-table-column>
                <el-table-column prop="imgJson" label="商品图片" width="100">
                    <template slot-scope="scope">
                        <img :src="processImg(scope.row.imgJson)" style="margin-top: 8px">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称">
                </el-table-column>
                <el-table-column label="类目" prop="categoryAndType">

                </el-table-column>
                <el-table-column label="租金" sortable>
                    <template slot-scope="scope">{{scope.row.displayRent | parsePrice}}</template>
                </el-table-column>
                <el-table-column label="新旧程度" sortable prop="oldLevelStr">
                </el-table-column>
                <el-table-column label="商品状态" prop="statusStr">
                </el-table-column>

                <el-table-column label="提交审核时间" sortable>
                    <template slot-scope="scope">
                        {{scope.row.checkSubmitTime | parseTime}}
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="returnCheck(scope.row.id)">撤回审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
    import productFilter from './components/product_filter.vue';
    import Empty from '@/components/Empty'
    import {goodsDeleteByIds, goodsReturnCheck,exportProductsLists} from '@/api/goods'
    import {host, osshost} from '@/api/util/fetch';
    import {showMessage} from '@/utils/message';
    import {stripscript, isNumber, IntergerIncludeZero, isInterger} from '@/utils/validate';
    import ExportFile from '@/components/ExportFile';

    export default {
        name: 'productStatusCheckPending',
        components: {
            'product-filter': productFilter,
            'Empty': Empty,
            'export-file': ExportFile,
        },
        props: {
            state: {
                type: String(),
                default: ''
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            queryPros: {
                type: Array,
                default: []
            }
        },
        mounted() {

        },
        data() {
            return {
                status: '提交审核',
                setInventory: false,
                toEditor: false,
                statusTitle: '',
                num: 0,
//        设置库存table中的数据
//        响应报文中得到 数据  title
                prodoctInventoryData: [
                    {
                        param1: "大",
                        param2: "红",
                        rentTime: "3天",
                        rentMoney: 1200,
                        currentCount: 10000
                    },
                    {
                        param1: "大",
                        param2: "红",
                        rentTime: "3天",
                        rentMoney: 1200,
                        currentCount: 10000
                    },
                    {
                        param1: "大",
                        param2: "红",
                        rentTime: "3天",
                        rentMoney: 1200,
                        currentCount: 10000
                    },
                    {
                        param1: "大",
                        param2: "红",
                        rentTime: "3天",
                        rentMoney: 1200,
                        currentCount: 10000
                    }
                ],
                ids: [],

              downloadGoodsApi:{ //导出订单api
                url:'goods/exportGoods',
                method:'get',
                data:{},
              },
            }
        },
        created() {
//      将父组件传过来的status继续传递给product-filter.vue组件
            this.toEditor = this.isEdit;
        },
        mounted() {
        },
        methods: {
            search() {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                }, 300);

            },
            processImg(url) {

                if (url && url !== '' || url && url !== '[]') {
                    url = JSON.parse(url)[0].url;
                    return osshost + url + '?x-oss-process=image/resize,m_fixed,h_60,w_60';
                } else {
                    return '';
                }
            },
            handleSelectionChange(val) {
//                console.log(val);
                this.num = val.length;
                let arr = [];
                for (let item of val) {
                    arr.push(item.id)
                }
                this.ids = arr;
//                console.log(this.ids);
            },
            renderTable() {
//        通过子组件传过来的数据 赋值

            },
            toEdit() {
                this.toEditor = true;
                this.$emit("toEdit", this.toEditor);
            },
            handleCommand(command) {
                if (this.ids.length == 0) {
                    this.$message({
                        type: 'warning',
                        message: '您还没选择要撤回的商品'
                    });
                    return;
                }
                else {
                    this.returnCheck(this.ids)
                }


            },
            returnCheck(id, index) {
                this.$confirm('撤回审核后，该商品将进入回收站', '确认撤回？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = null;
                    if (typeof id !== 'number') {
                        data = id
                    } else {
                        data = [id];
                    }
                    goodsReturnCheck(data)
                        .then((resp) => {
//                            console.log(resp);
                            showMessage({
                                type: 'success',
                                title: '撤回审核成功'
                            });
//                            let index = this.queryPros.length - 1 - index;
                            this.$emit('up-date', data);
                            this.$emit('is-change');
                        })
                        .catch((err) => {
                            this.$message.error(err);
                        });
                }).catch(() => {

                });
            },
        }
    }
</script>

<style>

</style>